<style lang="less" scoped>
    .product {
        width: 100%;
        height: auto;
        overflow: hidden;
        text-align: center;
        padding: 8px;
        display: flex;
        .left{
            flex-grow: 1;
        }
        .right{
            min-width: 300px;
            width: 300px;
            margin-left: 10px;
        }
    }
</style>
<template>
    <div class="product">
        <div class="left">
            <card-table
                cardtitle="产品列表"
                addbuttext="添加产品"
                :columns="columns"
                :selectList="selectList"
                :defaultSelete="defaultSelete"
                :searchForm="searchForm"
                :formItem="formItem"
                @add="add"
                @refresh="refresh"
                @on-current-change="onCurrentChange"
                :data="data">
                <Button slot="button" type="default"  @click="prouctxq">产品版本详情</Button>
            </card-table>
        </div>
        <div class="right">
            <my-card cardtitle="产品详情" :showright="true" icon="compose" cardbtn="修改产品信息" @cardrightclick="cpedit">
                <header class="example-header">
                    <span>
                        基本信息
                    </span>
                    <p>产品编号：{{ current.nub }}</p>
                    <p>客户产品编号：{{ current.cnumber }}</p>
                    <p>产品名称：{{ current.name }}</p>
                    <p>产品规格：{{ current.norm }}</p>
                    <p>产品颜色：{{ current.color }}</p>
                    <p>单位：{{ current.unit }}</p>
                    <p>图号：{{ current.version }}</p>
                    <p>类别：{{ current.type }}</p>
                    <p v-if="current != null">
                        机种：
                        <p v-for="item in current.machine" style="margin-left: 40px">
                             - {{ item }}
                        </p>
                    </p>
                    <p>创建人：{{ current.createname }}</p>
                </header>
            </my-card>
            <my-card cardtitle="版本历史" :showright="false" style="margin-top: 10px">
                <Timeline style="text-align: left;margin-left: 30px" v-if="current != {}">
                    <TimelineItem v-if="current.v.length > 0" v-for="item in current.v" :key="item">
                        <p class="time">{{ item.time }}</p>
                        <p class="content">{{ item.des }}</p>
                    </TimelineItem>
                    <TimelineItem><a href="#" @click.prevent="bbxqclick">查看更多</a></TimelineItem>
                </Timeline>
            </my-card>
        </div>
        <add-product v-model="addproduct"></add-product>
        <Modal
            v-model="updataproduct"
            ref="updataproduct"
            title="产品基本信息修改"
            :loading="loading"
            @on-ok="updataOk"
            @on-cancel="updataCancel">
            <Form :model="updataproductForm" :label-width="120" ref="updataproductForm">
                <FormItem label="产品编号：" prop="nub">
                    <Input v-model="updataproductForm.nub" :maxlength="16" style="width: 200px" disabled></Input>
                </FormItem>
                <FormItem label="客户产品编号：" prop="cnumber">
                    <Input v-model="updataproductForm.cnumber" :maxlength="16" style="width: 200px"></Input>
                </FormItem>
                <FormItem label="产品名称：" prop="name">
                    <Input v-model="updataproductForm.name" :maxlength="16" style="width: 200px"></Input>
                </FormItem>
                <FormItem label="产品规格：" prop="norm">
                    <Input v-model="updataproductForm.norm" :maxlength="16" style="width: 200px"></Input>
                </FormItem>
                <FormItem label="产品颜色：" prop="color">
                    <Input v-model="updataproductForm.color" :maxlength="16" style="width: 200px"></Input>
                </FormItem>
                <FormItem label="机种：" prop="machine">
                    <Input v-model="updataproductForm.machine" :maxlength="16" style="width: 200px"></Input>
                </FormItem>
                <FormItem label="单位：" prop="unit">
                    <Input v-model="updataproductForm.unit" :maxlength="16" style="width: 200px"></Input>
                </FormItem>
                <FormItem label="类型：" prop="type">
                    <Input v-model="updataproductForm.type" :maxlength="16" style="width: 200px"></Input>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
    import CardTable from '../components/cardTable.vue'
    import MyCard from '../components/myCard.vue'
    import AddProduct from './addproduct.vue'
    export default {
        name: 'product',
        data () {
            return {
                role: false,
                addproduct: false,
                updataproduct: false,
                loading: true,
                updataproductForm: {},
                columns: [
                    {
                        title: '产品编号',
                        key: 'nub',
                        width: 130
                    },
                    {
                        title: '客户产品编号',
                        key: 'cnumber',
                        width: 130
                    },
                    {
                        title: '产品名称',
                        key: 'name'
                    },
                    {
                        title: '产品规格',
                        key: 'norm'
                    },
                    {
                        title: '产品颜色',
                        key: 'color'
                    },
                    {
                        title: '机种',
                        key: 'machine',
                        render: (h, params) => {
                            let data = ''
                            for (let i in params.row.machine) {
                                data += params.row.machine[i] + ','
                            }
                            return h('span', data.substring(0, data.length - 1))
                        }
                    },
                    {
                        title: '单位',
                        key: 'unit',
                        width: 80
                    },
                    {
                        title: '图号',
                        key: 'version',
                        width: 120
                    },
                    {
                                title: '操作',
                                    key: 'action',
                                    width: 150,
                                    render: (h, params) => {
                                    return h('div', {
                                        style: {
                                            display: 'flex',
                                            justifyContent: 'center'
                                        }
                                    }, [
                                        h('Button', {
                                            props: {
                                                type: 'text'
                                            },
                                            on: {
                                                'click': () => {
                                                    let test = {
                                                        name: '工艺管理',
                                                        id: 'technology',
                                                        type: true,
                                                        url: '/main/technology/'+params.row.id
                                                    }
                                                    this.util.switchHeadTag(this.$parent, test, this.$store.state.tagdata)
                                                }
                                            }
                                        }, '工艺管理'),
                                        h('Button', {
                                            props: {
                                                type: 'text'
                                            },
                                            on: {
                                                'click': () => {
                                                    console.log('BOM管理')
                                                    let test = {
                                                        name: 'BOM管理',
                                                        id: 'productbom',
                                                        type: true,
                                                        url: '/main/productbom/'+params.row.id
                                                    }
                                                    this.util.switchHeadTag(this.$parent, test, this.$store.state.tagdata)
                                                }
                                            }
                                        }, 'BOM管理')
                                    ]);
                        }
                    }
                ],  //  表格列
                data: [],  //  表格数据
                selectList: [
                    {
                        label: '编号',
                        value: 'nub'
                    },
                    {
                        label: '客户产品编号',
                        value: 'cnumber'
                    },
                    {
                        label: '名称',
                        value: 'name'
                    },
                    {
                        label: '单位',
                        value: 'unit'
                    },
                    {
                        label: '库存',
                        value: 'stoct'
                    },
                    {
                        label: '版本号',
                        value: 'version'
                    }
                ],  //  搜索下拉列表
                defaultSelete: 'name',  //  搜索下拉列表默认值
                searchForm: {
                    nub: '',
                    cnumber: '',
                    name: '',
                    unit: '',
                    stoct: '',
                    varsion: ''
                },  //  表单初始值
                formItem: [
                    {
                        label: '产品编号',
                        key: 'nub',
                        placeholder: '输入产品编号'
                    },
                    {
                        label: '客户产品编号',
                        key : 'cnumber',
                        placeholder: '请输入客户产品编号'
                    },
                    {
                        label: '产品名称',
                        key: 'name',
                        placeholder: '输入产品名称'
                    },
                    {
                        label: '单位',
                        key: 'unit',
                        placeholder: '输入产品单位'
                    },
                    {
                        label: '版本号',
                        key: 'version',
                        placeholder: '输入产品版本号'
                    }
                ],  //  搜索表单item
                current: {}
            }
        },
        watch: {
            '$store.state.role': {
                handler: function (val, oldVal) {
                    this.role = this._.find(val, function(chr) {
                        return chr == '31'
                    }) ? true : false
                },
                deep: true
            }
        },
        methods: {
            add () {
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                let test = {
                    name: '添加产品',
                    id: 'addproduct',
                    type: true,
                    url: '/main/addproduct'
                }
                this.util.switchHeadTag(this.$parent, test, this.$store.state.tagdata)
            },
            updataOk () {
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                this.http.updateproduct(this, this.updataproductForm)
            },
            updataCancel () {
                this.$refs['updataproduct'].resetFields()
            },
            refresh () {
                this.http.getAllProduct(this, {})
            },
            prouctxq () {
                let test = {
                    name: '版本详情',
                    id: 'productversion',
                    type: true,
                    url: '/main/productversion/' + 'all/key/' + '1'
                }
                this.util.switchHeadTag(this.$parent, test, this.$store.state.tagdata)
            },
            onCurrentChange (current) {
                this.current = current
            },
            cpedit () {
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                this.updataproductForm = JSON.parse(JSON.stringify(this.current))
                let machine = ''
                for (let i = 0; i < this.updataproductForm.machine.length; i++) {
                    machine += this.updataproductForm.machine[i] + ','
                }
                this.updataproductForm.machine = machine
                this.updataproduct = true
            },
            bbxqclick () { //  版本详情按钮
                let test = {
                    name: '版本详情',
                    id: 'productversion',
                    type: true,
                    url: '/main/productversion/' + this.current.nub + '/key/' + '1'
                }
                this.util.switchHeadTag(this.$parent, test, this.$store.state.tagdata)
            }
        },
        components: {
            CardTable,
            MyCard,
            AddProduct
        },
        mounted: function () {
            this.role = this._.find(this.$store.state.role, function(chr) {
                return chr == '31'
            }) ? true : false
            this.http.getAllProduct(this, {})
        }
    };
</script>
